<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item label="时间:">
          <el-date-picker v-model="q.start_day" value-format="yyyy-MM-dd" type="date"
                          :picker-options="pickerOptions" placeholder="选择日期"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="q.end_day" value-format="yyyy-MM-dd" type="date"
                          :picker-options="pickerOptions" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="渠道号:">
          <more-selete v-if="getChnList &&restInit" :dataList="getChnList" @checkedMore="q.channel_names= $event"></more-selete>
        </el-form-item>
        <el-form-item label="所属主管:" v-if="roles.includes(6)">
          <more-selete v-if="managerArray&&restInit" :dataList="managerArray" @checkedMore="q.manage_list= $event"></more-selete>
        </el-form-item>
        <el-form-item label="所属组长:" v-if="roles.includes(6)||roles.includes(5)">
          <more-selete v-if="leaderArray&&restInit" :dataList="leaderArray" @checkedMore="q.leader_list= $event"></more-selete>
        </el-form-item>
        <el-form-item label="所属组员:"  v-if="roles.includes(6)||roles.includes(1)||roles.includes(5)">
          <more-selete v-if="staffArray&&restInit" :dataList="staffArray" @checkedMore="q.staff_list= $event"></more-selete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button  v-if="roles.includes(6)||roles.includes(5)"  size="mini" @click="downloadData" type="primary" plain icon="el-icon-printer">生成EXCEL</el-button>
    </div>
    <el-table v-if="listData.fields" :data="sum_stats" size="mini" stripe border fit highlight-current-row>
      <el-table-column width="100">合计</el-table-column>
      <el-table-column prop="register_count" label="激活"></el-table-column>
      <el-table-column prop="bind_count" label="注册"></el-table-column>
      <el-table-column prop="first_recharge_user" label="首充人数"></el-table-column>
      <el-table-column prop="first_recharge_count" label="首充金额"></el-table-column>
      <el-table-column prop="recharge_new_user" label="新充人数"></el-table-column>
      <el-table-column prop="recharge_new_amount" label="新充金额"></el-table-column>
      <el-table-column prop="recharge_amount" label="充值金额">
        <template slot-scope="scope">{{scope.row.recharge_amount}}</template>
      </el-table-column>
      <el-table-column prop="recharge_user" label="充值人数"></el-table-column>
      <el-table-column v-if="listData.fields.includes('withdraw_amount')" prop="withdraw_amount" label="提现">
        <template slot-scope="scope">
          <span v-if="scope.row.withdraw_amount">{{(scope.row.withdraw_amount)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listData.fields.includes('true_profit')" prop="true_profit" label="营收">
        <template slot-scope="scope">
          <span v-if="scope.row.true_profit">{{(scope.row.true_profit)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listData.fields.includes('agency_recharge')" prop="agency_recharge" label="代理充值">
        <template slot-scope="scope">
          <span v-if="scope.row.agency_recharge">{{(scope.row.agency_recharge)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listData.fields.includes('online_recharge')" prop="online_recharge" label="在线充值">
        <template slot-scope="scope">
          <span v-if="scope.row.online_recharge">{{(scope.row.online_recharge)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column prop="channel_tax_amount" label="玩法税收">
        <template slot-scope="scope">{{scope.row.channel_tax_amount}}</template>
      </el-table-column>
      <el-table-column prop="real_channel_tax_amount" label="渠道实际税收" width="140px">
        <template slot-scope="scope">{{scope.row.real_channel_tax_amount}}</template>
      </el-table-column>
    </el-table>
    <br/>
    <el-table v-if="listData.items" :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
      <el-table-column prop="day" label="日期" width="100"></el-table-column>
      <el-table-column v-if="roles.includes(6)" prop="manager" label="所属主管"></el-table-column>
      <el-table-column v-if="roles.includes(6)||roles.includes(5)"  prop="leader" label="所属组长"></el-table-column>
      <el-table-column v-if="roles.includes(6)||roles.includes(1)||roles.includes(5)"  prop="staff" label="所属组员"></el-table-column>
      <el-table-column prop="channel" label="渠道号"  width="150"></el-table-column>
      <el-table-column prop="platform" label="系统"></el-table-column>
      <el-table-column prop="register_count" label="激活" sortable></el-table-column>
      <el-table-column prop="bind_count" label="注册" sortable></el-table-column>
      <el-table-column prop="first_recharge_user" label="首充人数" sortable></el-table-column>
      <el-table-column prop="first_recharge_count" label="首充金额" sortable></el-table-column>
      <el-table-column prop="recharge_new_user" label="新充人数" sortable></el-table-column>
      <el-table-column prop="recharge_new_amount" label="新充金额" sortable></el-table-column>
      <el-table-column prop="recharge_amount" label="充值金额" sortable>
        <template slot-scope="scope">{{scope.row.recharge_amount}}</template>
      </el-table-column>
      <el-table-column prop="recharge_user" label="充值人数" sortable></el-table-column>
      <el-table-column v-if="listData.fields.includes('withdraw_amount')" prop="withdraw_amount" label="提现" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.withdraw_amount">{{(scope.row.withdraw_amount)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listData.fields.includes('true_profit')" prop="true_profit" label="营收" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.true_profit">{{(scope.row.true_profit)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listData.fields.includes('agency_recharge')" prop="agency_recharge" label="代理充值" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.agency_recharge">{{(scope.row.agency_recharge)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listData.fields.includes('online_recharge')" prop="online_recharge" label="在线充值" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.online_recharge">{{(scope.row.online_recharge)}}</span><span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column prop="channel_tax_amount" label="玩法税收" sortable>
        <template slot-scope="scope">{{scope.row.channel_tax_amount}}</template>
      </el-table-column>
      <el-table-column prop="real_channel_tax_amount" label="渠道实际税收"  width="140px">
        <template slot-scope="scope">{{scope.row.real_channel_tax_amount}}</template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.page_no" :page-sizes="[30, 100, 500, 1000]"
                      :page-size="q.page_size" layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import MoreSelete from '@/components/MoreSelete/index'
  import timedate from '@/utils/timedate'
  import { getStatistReport, getChnOptions, getLeaderList } from '@/api'
  import {queryFilter} from '@/utils/patch'
  export default {
    components: {MoreSelete},
    data() {
      return {
        listData: {},
        q: {page_size: 30, page_no: 1, order_by: '-day', start_day: timedate.dateYesterday, end_day: timedate.dateToday},
        listLoading: false,
        showUpdate: false,
        show_id: null,
        leaderlist: [],
        leaderArray: [],
        stafflist: [],
        staffArray: [],
        managerlist: [],
        managerArray: [],
        Detail: {},
        restInit: true,
        getChnList:null,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        sum_stats: [],
        roles:[],
      }
    },
    mounted(){
      this.getList()
      this.getchnList()
      this.getLeaderList()
      this.getStaffList()
      this.getManagerList()
      this.getroles()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      getroles(){
        this.roles=this.$store.state.user.roles.map(item=>{
          return item.id
        })
      },
      add(){
        this.show_id = null
        this.showUpdate = true
      },
      update(row){
        this.Detail = row
        this.showUpdate = true
      },
      query(){
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
          if(!this.q.end_day){
              this.q = Object.assign(this.q, {end_day: timedate.dateToday})
          }
          if(!this.q.start_day){
              this.q = Object.assign(this.q, {start_day: timedate.dateYesterday})
          }
        this.getList()
      },
      reload() {
        this.restInit = false
        this.$nextTick(() => (this.restInit = true))
        this.q = {page_size: 30, page_no: 1, order_by: '-day', start_day: timedate.dateYesterday, end_day: timedate.dateToday}
        this.getList()
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.page_no = val
        this.getList()
      },
      downloadData(){
          let queryObj = queryFilter(this.q)
          let data = Object.assign({},queryObj,{ to_export_file: true})
          getStatistReport(data).then(res => {
            if (res.status === 0) {
              window.location.href = window.location.origin + res.data.url
            }
          })
      },
      isEmptyObject(obj) {
        if (JSON.stringify(obj) == '{}') {
          return true
        } else{
          return false
        }
      },
      async getList(){
        let queryObj = queryFilter(this.q)
        await getStatistReport(queryObj).then(res => {
          if(res.status === 0){
            this.listLoading = false
            this.listData = res.data
            this.sum_stats = []
            if(!this.isEmptyObject(res.data.sum_stats)) {
              this.sum_stats.push(res.data.sum_stats)
            }
          }
        }).catch(()=>{
          console.log('超时')
        })
      },
      async getchnList(){
        await getChnOptions({data_type: 'channel'}).then(res => {
          if(res.status === 0){
            this.getChnList = res.data
          }
        })
      },
      async getLeaderList(){
         await getChnOptions({data_type: 'leader'}).then(res => {
          if(res.status === 0){
            this.leaderlist = res.data
            this.leaderArray = []
            this.leaderlist.map(item => {
              this.leaderArray.push(item.name)
            })
          }
        })
      },
      async getStaffList(){
        await getChnOptions({data_type: 'staff'}).then(res => {
          if(res.status === 0){
            this.stafflist = res.data
            this.staffArray = []
            this.stafflist.map(item => {
              this.staffArray.push(item.name)
            })
          }
        })
      },
      async getManagerList(){
        await getChnOptions({data_type: 'manager'}).then(res => {
          if(res.status === 0){
            this.managerlist = res.data
            this.managerArray = []
            this.managerlist.map(item => {
              this.managerArray.push(item.name)
            })
          }
        })
      }
    },
    watch: {
      showUpdate() {
        if(!this.showUpdate){
          this.getList()
        }
      }
    }
  }
</script>

<style type="text/css">
  .el-table .caret-wrapper {
    width: auto;
  }
</style>
